<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>客户预约</title>
    <meta charset="utf-8">
    <link href="${basepath}/assets/fullcalendar/lib/cupertino/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
	<link href="${basepath}/assets/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
    <script src="${basepath}/assets/fullcalendar/lib/moment.min.js" type="text/javascript"></script>
	<script src="${basepath}/assets/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
	<!-- layer -->
	<script type="text/javascript" src="${basepath}/assets/layer/layer.js"></script>
	<script type="text/javascript" src="${basepath}/assets/laydate/laydate.js"></script>

    <link href="${basepath}/css/viewcss/main/workschedule/scheduleform.css" rel="stylesheet" type="text/css"/>
    <style>
    	body {
			padding: 0;
			font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
			font-size: 12px;
		}
		.toolbar{
			height:30px;
			background-color:#F5F5F5;
			border-radius:4px;
			border: 1px solid #CCC;
			padding-top:8px;
		}
		.btndiv{
			text-align:center;
		}
		.btn{
			text-align:center;
			display: inline-block; 
			width: 50px;
			height: 22px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			color:black;
		}
		.querybtn{
			text-align:center;
			display: inline-block; 
			width: 60px;
			height: 18px;
			border-radius:4px;
			border: 1px solid #CCC;
			background: #F5F5F5;
			padding-top: 4px;
		}
		.queryinput{
			height: 22px;
		    line-height: 22px;
		    padding-right: 20px;
		    border: 1px solid #C6C6C6;
		    background-repeat: no-repeat;
		    background-position: right center;
		    background-color: #fff;
		    outline: 0;
		    width:150px;
		    border-radius:4px;
		    margin-left:10px;
		}
    </style>
</head>
<script>
	var courseInfo = {};
	var customerData = {
		c_user_id:"",
		real_name:""
	};
	var selectData;
	var usergrid; //学生信息
	$(document).ready(function() {
		usergrid = $('#usergrid').datagrid({
    		rownumbers:true,
    		singleSelect:false,
    		selectOnCheck: true,
    		checkOnSelect: true,
    		pagination:true,
    		fit: true, //datagrid自适应宽度
            fitColumn: true, //列自适应宽度
            striped: true, //行背景交换
            nowap: false, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
            width:210,
            height:'98%',
            url:"${path}/assist/custCourseApplyUserList",
            columns:[[
          			{field:'id', title: '编号', sortable: true, checkbox: true,fitColumns:true },
          			{field:'baby_headimgurl',title:'头像',width:90,fitColumns:true,formatter:formatImage},
          			{field:'baby_name',title:'姓名',width:80,'sortable':true,fitColumns:true },
          			{field:'baby_birthday',title:'生日',width:100,fitColumns:true }	 
          		]],
          		toolbar:'#childSearchTb'
    	})
  
        var pager = usergrid.datagrid('getPager');   
	    pager.pagination({
	         total:0,
	         pageSize:10, 	
	         pageNumber:1,
	         pageList:[10,20,30],  	               
	         loading:true,
	         showPageList:true,
	         showRefresh:true,
	         beforePageText:'当前页数',
	         afterPageText:' 共{pages}页',
	         displayMsg:'共{total}条记录'
	    });   
	    
	    $('#childSearch').on('click',function(e){
	    	var class_id = $('#classId').combobox('getValue'),
	    	babyName = $('#babyName').val();
	    	if(class_id==''&&babyName==''){
	    		return layer.msg('至少选择一个查询条件', {time: 3000, icon: 6});
	    	}
	    	usergrid.datagrid("load",{class_id: class_id,babyName: babyName});
        });
	    
		$("#querydate").val(new Date().format('yyyy-MM'));
	
		$('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			//defaultDate: '2015-02-12',
			editable: true,
			height:650,
			monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],    
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],    
			eventLimit: true, // allow "more" link when too many events
			buttonText: {    
                today: '今天',    
                month: '月',    
                week: '周',    
                day: '日'      
            },
            dayClick: function(date, allDay, jsEvent, view) {  
            },
            //eventMouseover:function(event,jsEvent,view ) { 
            //	selectData = event._selfData;
            	//layer.tips($('#mytipdiv').html(), this, {tips: [2,event.color],time: 4000});//
            //},
            eventClick:function(event, jsEvent, view){ 
            	var start = new Date(event._selfData.start).format('yyyy-MM-dd hh:mm');
            	var end = new Date(event._selfData.end).format('yyyy-MM-dd hh:mm');
            	var title = event.title;
            	selectData = event._selfData;
            	courseInfo.course_id = event._selfData.id;
            	courseInfo.course_apply_id = event._selfData.apply_id;
            	//if(event._selfData.apply_id){
            	//	$('#btnyy').text("取消预约");
            	//}else{
            	//	$('#btnyy').text("预约");
            	//}
            	courseInfo.course_type = event._selfData.course_type;
            	$('#tiptitle').html(title);
            	$('#tipcontent').html(event._selfData.content);
            	$('#tipdesc').html(event._selfData.desc);
            	$('#tipstart').html("从:"+start);
            	if(event._selfData.course_type==1){
            		$('#tipend').html("到:"+end);
            	}else{
            		$('#tipend').html("");
            	}
            	layer.tips($('#tipdiv').html(), this, {tips: [3,event.color],time: 4000});//
            },
            select: function(start, end) {
			},
			events: function(start, end, timezone, callback) {
		        $.ajax({
		        	url: '${path}/assist/queryCustCourseApply?isReleased=1',
		            dataType: 'json',
		            data:{querydate:$("#querydate").val(),c_user_id:customerData.c_user_id},
		            success: function(doc) {
		                var events = [];
		                $.each(doc,function(k,v) {
		                    events.push({
		                        title: v.title,
		                        start: new Date(v.start).format('yyyy-MM-dd hh:mm'),
		                        end: new Date(v.end).format('yyyy-MM-dd hh:mm'),
		                        content:v.content,
		                        color:v.color,
		                        backgroundColor:v.backgroundColor,
		                        borderColor:v.borderColor,
		                        textColor:v.textColor,
		                        _selfData:v
		                    });
		                });
		                callback(events);
		            }
		        });
		    },
		    eventAfterRender : function(event, element, view) {  
		    	var fstart  = new Date(event._selfData.start).format('hh:mm');  
		        var fend  = new Date(event._selfData.end).format('hh:mm');
		        var evtcontent = "";
		        if(event._selfData.course_type==1){
		        	evtcontent = '<div ><span>'+fstart+"/"+fend+"/"+event.title+'</div>';
		        }else{
		        	evtcontent = '<div ><span>'+fstart+"/"+event.title+'</div>';
		        }
		        
		        //if('apply_id' in event._selfData){
		        //	evtcontent += ('</span><span>（已预约）</span></div>');
		        //}else{
		        //	evtcontent += ('</span><span>（未预约）</span></div>');  
		        //} 
		        if(view.name=="month"){  
		           }else if(view.name=="agendaWeek"){  
		        }else if(view.name=="agendaDay"){  
		         }
		        element.html(evtcontent);
		    }
		});
	});
	
	function formatImage(val,row,index){
    	if(val){
    		return "<img style='width:80px;height:80px' src='"+val+"'/>";
    	}else{
    		return ""
    	}
    }
	
	var layIndex;
	var showZjPop = function(id){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/course_open_detail/editpage/course_open_detail_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"早教排课",
			type: 2,
			fix: false,
	        maxmin: true,
	        area: ['850px', '470px'], //宽高
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	var showTbPop = function(id){
		var url = speraoa.oaurl+"/ShopAdmin/isp/isp_entity/care_class_open/EditPage/care_class_open_EditPageForYu";
		if(id){
			url += "?id="+id;
		}
		layIndex = layer.open({
			title:"托班排课",
			type: 2,
			fix: false,
	        maxmin: true,
			area: ['850px', '470px'], //宽高
		    content: url,
		    cancel: function(index){
		    	reflashCal();
	        }
		});
	}
	
	//提交
	var applyCourse = function(){
		if(courseInfo==null){
			return layer.msg("请先选择课程", {time: 3000, icon:6});
		}
		if(courseInfo.course_type==1){
			applyZj();
		}else{
			applyTb();
		}
	}
	
	var applyTb = function(){
		if('course_apply_id' in courseInfo && courseInfo.course_apply_id!=null){//取消预约
			$.ajax({
	            url: '${path}/course/cancelCareClass',
	            type:'POST', 
	            data: {care_class_appointment_id:courseInfo.course_apply_id},
	            dataType: 'json',
	            success: function(doc) {
	            	layer.msg(doc.msg, {time: 3000, icon:6});
	            	if(doc.status==1){
	            		layer.close(layIndex);
		            	reflashCal();
	            	}
	            }
	        });
		}else{//预约
			//改成批量排课，这里前台循环，偷懒写法
			var rows = usergrid.datagrid("getSelections");
			//if(customerData==null||customerData.c_user_id==""||customerData.real_name==""){
			if(rows.length==0){
				return layer.msg("请先选择客户", {time: 3000, icon:6});
			}
			var retStr = "操作成功";
	    	$.each(rows, function (i, rec) {
	    		var subForm = {};
	    		subForm.course_open_detail_id = courseInfo.course_id;
				subForm.c_user_id = rec.baby_id;
				subForm.course_user_type_code = 1;
				subForm.real_name = rec.baby_name;
				//subForm.phone = $('#customerPhone').val();
				$.ajax({
		            url: '${path}/course/appointCareClass',
		            //contentType: "application/json",
		            type:'POST', 
		            data: subForm,
		            async:false,
		            dataType: 'json',
		            success: function(doc) {
		            	if(doc.status=='0'){
		            		retStr = doc.msg;
		            	}
		            }
		        });
	        });
	    	layer.msg(retStr, {time: 3000, icon:6});
	    	layer.close(layIndex);
        	reflashCal();
		}
	}
	
	//早教预约取消预约
	var applyZj = function(){
		if('course_apply_id' in courseInfo && courseInfo.course_apply_id!=null){//取消预约
			$.ajax({
	            url: '${path}/course/cancelCourse',
	            //contentType: "application/json",
	            type:'POST', 
	            data: {course_appointmet_id:courseInfo.course_apply_id},
	            dataType: 'json',
	            success: function(doc) {
	            	layer.msg(doc.msg, {time: 3000, icon:6});
	            	if(doc.status==1){
		            	reflashCal();
	            	}
	            }
	        });
		}else{//预约
			//改成批量排课，这里前台循环，偷懒写法
			var rows = usergrid.datagrid("getSelections");
			//if(customerData==null||customerData.c_user_id==""||customerData.real_name==""){
			if(rows.length==0){	
				return layer.msg("请先选择客户", {time: 3000, icon:6});
			}
			var retStr = "操作成功";
	    	$.each(rows, function (i, rec) {
	    		var subForm = {};
	    		subForm.course_open_detail_id = courseInfo.course_id;
				subForm.c_user_id = rec.baby_id;
				subForm.course_user_type_code = 2;
				subForm.real_name = rec.baby_name;
				//subForm.phone = $('#customerPhone').val();
				$.ajax({
		            url: '${path}/course/appointCourse',
		            //contentType: "application/json",
		            type:'POST', 
		            data: subForm,
		            async:false,
		            //dataType: 'json',
		            success: function(doc) {
		            	if(doc.status=='0'){
		            		retStr = doc.msg;
		            	}
		            }
		        });
	    	});
	    	layer.msg(retStr, {time: 3000, icon:6});
            reflashCal();
		}
	}
	
	var queryCalendar = function(){
		$('#calendar').fullCalendar( 'gotoDate',new Date($("#querydate").val()));
		reflashCal();
		//$('#calendar').fullCalendar('refetchEvents');
	}
	
	var reflashCal = function(){
		$('#calendar').fullCalendar('refetchEvents');
	}
	
	var clearForm = function(){
		//$("input[type=reset]").trigger("click");
		//$("#assist option").remove();
	}
	
	var queryCustomer = function(){
		customerData.c_user_id = "";
		customerData.real_name = "";
		$('#queryCustomer').val('');
		layIndex = layer.open({
			title:"学生选择",
			type: 2,
			fix: false,
	        //shadeClose: true,
	        maxmin: true,
			area: ['850px', '470px'], //宽高
		    content: "${path}/commonSel/queryCustomer",
		});
	}
	

	var selectDataFun = function(data){
		if('c_user_id' in data){
			customerData.c_user_id = data.c_user_id;
		}
		if('real_name' in data){
			customerData.real_name = data.real_name;
		}
		layer.close(layIndex);
		$('#queryCustomer').val(customerData.real_name);
		$('#customerPhone').val(data.phone);
		queryCalendar()
	}
	
	var showDetail = function(){
		if(courseInfo==null||!('course_id' in courseInfo)||courseInfo.course_id==''){
			return layer.msg("请先选择课程", {time: 3000, icon:6});
		}
		if(courseInfo.course_type==1){
			showZjPop(courseInfo.course_id);
		}else if(courseInfo.course_type==2){
			showTbPop(courseInfo.course_id);
		}
	}
	
	var showStudent=function(){
		if(selectData.course_type){
			var course_open_detailID=selectData.id;
			var url ="${path}/course/studentList?course_open_detailID="+course_open_detailID+"&course_type="+selectData.course_type;
			layIndex = layer.open({
				title:"学生列表",
				type: 2,
				fix: false,
				maxmin: true,
				area: ['475px', '600px'], //宽高
				content: url,
				cancel: function(index){
					reflashCal();
				}
		 	});
		}else{
			layer.msg("未知课程类型", {time: 3000, icon:6});
		}
	}
</script>
<body class="easyui-layout">
	<div data-options="region:'west',split:true" title="宝宝查询" style="width:28%;">
        <table id="usergrid" class="easyui-datagrid"
                singleSelect="true" iconCls="icon-save">
        </table>
    </div>
	<div data-options="region:'center'"  style="width:72%;">
		<div id="toolbar" class="toolbar">
			<label style="font-size:14px;margin-left:20px;">课表查询月份：</label>
			<input id="querydate" class="laydate-icon" onclick="laydate({istime: true, format: 'YYYY-MM'})" 
				style="width:120px;border-radius:4px;margin-left:10px;">
			<!-- <label style="font-size:14px;margin-left:20px;">选择学生：</label>
			<input id="queryCustomer" class="queryinput" onfocus="queryCustomer()" style="width:80px">
			<label style="font-size:14px;margin-left:20px;color:red">提醒手机号：</label>
			<input id="customerPhone" class="queryinput"> -->
			<a href="#" onclick="queryCalendar()" class="querybtn">查询</a>
		</div>
		
		<div id='calendar' style="width:98%;text-align:center;margin:0 auto;padding:5px;"></div>
    </div>
    
    <div id="childSearchTb" style="padding:2px 5px;padding-left:10px">
        	<label style="color:red">课程: </label><input class="easyui-combobox mytextbox" id="classId" name="classId" style="width:120px;" data-options="
                            url:'${path}/userclass/getCourseClass',
                            valueField: 'id',
                            textField: 'className'
                            ">
                                姓名: <input type="text" class="mytextbox" id="babyName" style="width:80px;">
        <a id="childSearch" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
    </div>
    
	<div id="inlineForm" style="display:none;padding:30px">
		<form class="bootstrap-frm" action="" method="post" id="scheduleForm" name="scheduleForm">
			<input type="reset" style="display:none;" /> 
			<input type="hidden" name="id" id="id" style="width:200px">
			<table>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">标题</label>
                    </td>
                    <td style="width:220px;padding:5px">
                    	<input type="text" placeholder="标题" name="title" id="title" style="width:200px">
                    </td>
                    <td style="padding:5px">
                        <label style="font-size:14px;">排班类型</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="scheduleType" id="scheduleType" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">部门</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="dept" id="dept" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">用户</label>
                    </td>
                    <td style="padding:5px">
                    	<select name="assist" id="assist" style="width:200px">
                    		<option value=''>请选择</option>
                    	</select>
                    </td>
                </tr>
                <tr>
                    <td style="padding:5px">
                       <label style="font-size:14px;">开始日期</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="starttime" id="starttime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                    
                    <td style="padding:5px">
                        <label style="font-size:14px;">结束时间</label>
                    </td>
                    <td style="padding:5px">
                    	<input type="text" name="endtime" id="endtime" class="laydate-icon" 
                    		onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" style="width:200px">
                    </td>
                </tr>
                <tr>
                    <td style="width:100px;padding:5px">
                        <label style="font-size:14px;">内容</label>
                    </td>
                    <td colspan="3" style="padding:5px">
                        <textarea name="content" id="content" style="width:510px;height:100px"></textarea>
                    </td>
                </tr>
            </table>
            <div class="btndiv"><a href="#" onclick="subForm()" class="btn">确定</a></div>
        </form>
	</div>
	
	<div style="display:none" id="tipdiv">
		<div id="tiptitle" style="font-size:12px"></div>
		<div id="tipcontent" style="font-size:12px"></div>
		<div id="tipdesc" style="font-size:12px"></div>
		<div style="font-size:12px">计划时间:</div>
		<div id="tipstart" style="font-size:12px"></div>
		<div id="tipend" style="font-size:12px"></div>
		<a href="#" class="btn"  onclick="applyCourse()" id="btnyy">预约</a>
		<a href="#" class="btn"  onclick="showDetail()">详情</a>
		<a href="#" class="btn"  onclick="showStudent()" id="showStudent">学生</a>
	</div>
</body>
</html>
